<template>
	<view class="personal">
		<!-- 头像姓名区 -->
		<view class="hander">
			<!-- 登录状态 -->
			<template v-if="personList.nickName">
				<u-avatar :src="personList.avatarUrl" size="60"></u-avatar>
				<text class="text">{{ personList.nickName }}</text>
				<view class="btn"><u-button type="primary" text="退出登录" plain shape="circle" @click="escLogin" size="normal"></u-button></view>
			</template>
			<!-- 未登录 -->
			<template v-else>
				<u-avatar src="/static/images/personal/personal.png" size="60"></u-avatar>
				<view class="btn"><u-button type="primary" text="去登录吧" plain shape="circle" @click="goLogin" size="normal"></u-button></view>
			</template>
		</view>

		<view class="infor_mation">
			<view class="" v-for="(item, index) in infomation" :key="index">
				<text>{{ item.name }}</text>
				<text>{{ item.number }}</text>
			</view>
		</view>

		<!---->
		<view class="my-order">
			  <u-grid
			                border
			                @click="click"
			        >
			            <u-grid-item
			                    v-for="(item,index) in orderData"
			                    :key="index"
			            >
			                <image :src="item.icon" mode=""></image>
			                <text class="grid-text">{{item.title}}</text>
			            </u-grid-item>
			        </u-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			personList: {},
			infomation: [{ name: '健康分', number: 3 }, { name: '优惠券', number: 8 }, { name: '消息', number: 5 }],
			orderData: [
				{
					icon: '/static/mine/jiuzhenren.svg',
					title: '就诊人管理',
					path: '/pages/my-service/my-patient/my-patient'
				},
				{
					icon: '/static/mine/guahao.svg',
					title: '我的挂号',
					path: '/pages/my-service/my-registration/index'
				},
				{
					icon: '/static/mine/xinguanyimiao.svg',
					title: '新冠疫苗',
					path: '/pages/my-service/xinguan/index'
				},
				{
					icon: '/static/mine/hpvyimiao.svg',
					title: 'HPV疫苗',
					path: '/pages/my-service/hpv-view/index'
				},
				{
					icon: '/static/mine/hesuan.svg',
					title: '核酸检测',
					path: '/pages/my-service/nucleic-acid/index'
				},
				{
					icon: '/static/mine/tijianbaogao.svg',
					title: '我的体检',
					path: '/pages/my-service/phy-exam/index'
				}
			]
		};
	},
	methods: {
		goLogin() {
			uni.reLaunch({
				url: '../../pages/component/login/login'
			});
		},
		escLogin() {
			// #ifdef MP-WEIXIN
			wx.setStorage({
				key: 'userInfo',
				data: ''
			});
			this.goLogin();
			// #endif
		},
		click(){
			console.log(1);
		}
	},
	mounted() {
		// #ifdef MP-WEIXIN
		wx.getStorage({
			key: 'userInfo',
			success: res => {
				this.personList = JSON.parse(res.data);
			}
		});
		// #endif
	}
};
</script>

<style lang="scss">
.personal {
	background: linear-gradient(to bottom, #e3efff 30%, #f6f6f6 40%);
	height: 100vh;
	.hander {
		height: 200rpx;
		display: flex;
		align-items: center;
		padding-left: 70rpx;
		// justify-content: center;
		.btn {
			margin-left: 20rpx;
			width: 150rpx;
		}
		.text {
			margin-left: 20rpx;
		}
	}
}
/* 三个排列 */
.infor_mation view {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.infor_mation {
	display: flex;
	justify-content: space-around;
	font-weight: bold;
	margin: 20rpx 0;
}
.infor_mation text {
	padding-bottom: 15rpx;
}
.my-order {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 0 20rpx 20rpx 20rpx;
	display: flex;
	flex-wrap: wrap;
	font-size: 28rpx;
	image{
	  width: 70rpx;
	  height: 70rpx;
	  margin-bottom: 25rpx;
	  vertical-align: bottom;
	}
	.grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 0rpx 0 20rpx 0rpx;
	    }
	.u-grid-item {
		padding-top: 24rpx !important;
	}
}
</style>
